---
title: React Native Input Mask
description: Learn how to use React Native Input Mask with Unform
---

[React Native Masked Text](https://github.com/benhurott/react-native-masked-text) offers an easy way to add masks to inputs.

## Input component

Create a base Input component, as described in the [React Native](/guides/react-native) example.

Here is a small difference: assuming that the data to be sent in the form should not be formatted, we will use a `rawText` property that will inform us of the component's gross value.

Note that `getValue` can return the `rawText` property, that is, if the form does not use an `InputMask`, the returned value will be the one stored in `inputRef`

```jsx lineNumbers=true
import React, { useRef, useEffect, useCallback } from 'react';
import { TextInput } from 'react-native';
import { useField } from '@unform/core';

function Input({ name, label, onChangeText, rawText, onInitialData, ...rest }) {
  // this will cause the InputMask to be updated if the Form receives initial data
  useEffect(() => {
    if (onInitialData) onInitialData(defaultValue);
  }, [defaultValue, onInitialData]);

  useEffect(() => {
    registerField({
      // modify getValue
      getValue() {
        if (rawText) return rawText;

        if (inputRef.current) return inputRef.current.value;

        return '';
      },
    });
  }, [fieldName, rawText, registerField]);

  return (
    {...}
  );
}

export default Input;
```

## InputMask component

Inform which component should be rendered using the `customTextInput` property, in this case `Input`.
Add `rawText` to the `Input` properties using `customTextInputProps`

```jsx lineNumbers=true
import React, { useState, useCallback, forwardRef } from 'react';
import { TextInputMask } from 'react-native-masked-text';

import Input from '../Input';

const InputMask = ({ type, ...rest }, inputRef) => {
  const [text, setText] = useState('');
  const [rawText, setRawText] = useState('');

  const handleChangeText = useCallback((maskedText, unmaskedText) => {
    setText(maskedText);
    setRawText(unmaskedText);
  }, []);

  return (
    <TextInputMask
      type={type}
      includeRawValueInChangeText
      value={text}
      onChangeText={handleChangeText}
      customTextInput={Input}
      customTextInputProps={{
        ref: inputRef,
        rawText,
        onInitialData: setText,
      }}
      {...rest}
    />
  );
};

export default forwardRef(InputMask);
```

## Example

```jsx lineNumbers=true
const App = () => {
  const formRef = useRef(null);

  function handleSubmit(data) {
    /**
      Out: { first_name: 'Lorem Ipsum', cpf: '11111111111' }
      On screen: { first_name: 'Lorem Ipsum', cpf: '111.111.111-11' }
    */
    console.log(data);
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignContent: 'center' }}>
      <Form ref={formRef} onSubmit={handleSubmit}>
        <Input name="first_name" label="Name" />
        <InputMask type="cpf" name="cpf" keyboardType="numeric" label="CPF" />
        <Button
          onPress={() => formRef.current.submitForm()}
          title="console.log"
        />
      </Form>
    </View>
  );
};
```
